<template>
  <div>
    <input type="file" @change="fileChange" multiple/>
    <button @click="submit">多选提交</button>
    <button @click="shardingSubmit">分片提交</button>
    <button @click="imageCompress">压缩图片</button>
    <img style="width: 50px" :src="imgbase64" />
    <span v-for="(item, index) in fileList" :key="index">{{ item.name }}</span>
    <div>
      上传进度：{{ precent }}%
    </div>
    <button @click="dealFile">处理图片信息</button>
    <!-- <img :src="img" alt=""> -->
  </div>
</template>

<script>
import axios from 'axios'
import JSZip from 'jszip'
// import FileSaver from 'file-saver'

export default {
  data () {
    return {
      fileList: [], // 定义空数组存储多个文件
      imgbase64: '',
      precent: 0,
      img: '',
      filesPromises: [],
      compreeContent: null
    }
  },
  components: {
  },
  methods: {
    // 利用promise处理多个图片
    dealFiles (file) {
      return new Promise((resolve, reject) => {
        resolve({ file })
      })
    },
    // 图片压缩
    imageCompress () {
      console.log('files', this.filesPromises)
      Promise.all(this.filesPromises).then(async (files) => {
        const zip = new JSZip()
        files.forEach(async (item, index) => {
          const { file } = item
          console.log('每一个二进制流文件数据为：', file)
          await zip.file(file.name, file)
        })
        zip.generateAsync({ type: 'blob' }).then((content) => {
          console.log('压缩包的二进制流信息', content)
          // FileSaver.saveAs(content, '合并的内容' + '.zip')
          this.compreeContent = content
        })
      }).catch(err => {
        console.log(err)
      })
    },
    fileChange (e) {
      // 一个由不同文件对象组成的对象
      console.log('文件对象e，文件方法：e.target.files', e, e.target.files)
      // 检测e.target.files是否有多个文件
      if (e.target.files.length > 1) {
        this.fileList = [...this.fileList, ...e.target.files]
        // this.fileList = this.fileList.concat(e.target.files)
      } else {
        this.fileList.push(e.target.files[0])
      }
      // this.fileList = []
      // this.fileList.push(e.target.files[0])
      this.fileList.forEach(item => {
        this.filesPromises.push(this.dealFiles(item))
      })
      console.log('存放文件的列表', this.fileList, this.filesPromises)
    },
    dealFile () {
      console.log('this.fileList', this.fileList)
      const reader = new FileReader()
      console.log('FileReader方法及属性：', reader)
      // console.log('尝试使用只读属性error：', reader.error)
      // console.log('尝试使用只读属性readyState：', reader.readyState)
      // console.log('尝试使用只读属性result：', reader.result)
      this.fileList.forEach(item => {
        console.log('file', item)
        const blob = this.fileToBlob(item)
        this.blobToFile(blob, item.name)
        // const reader = new FileReader()
        // reader.readAsArrayBuffer(item)
        // reader.readAsBinaryString(item)
        // reader.readAsDataURL(item)
        // reader.readAsText(item)
        // // reader.abort()
        // // console.log('包含data:文件格式的Base64字符串--', reader)
        // // console.log('走到这了1')
        // reader.onabort = (res) => {
        //   console.log('读取中断了onabort', res)
        // }
        // reader.onerror = (res) => {
        //   console.log('读取发生错误了onerror', res)
        // }
        // reader.onload = (res) => {
        //   // console.log('读取完成了onload', res)
        //   // console.log('执行readAsDataURL返回的数据', res)
        //   // console.log('返回的result值为：', res.target.result)
        //   // console.log('执行readAsArrayBuffer返回的数据', res)
        //   // console.log('返回的result值为：', res.target.result)
        //   // console.log('执行readAsBinaryString返回的数据', res)
        //   // console.log('返回的result值为：', res.target.result)
        //   // console.log('执行readAsText返回的数据', res)
        //   // console.log('返回的result值为：', res.target.result)
        // }
        // reader.abort()
        // reader.onloadstart = (res) => {
        //   console.log('读取开始了onloadstart', res)
        // }
        // reader.onloadend = (res) => {
        //   console.log('读取结束了onloadend', res)
        // }
        // reader.onprogress = (res) => {
        //   console.log('读取进行中onprogress', res)
        // }
      })
    },
    fileToBlob (file) {
      const blob = new Blob([file], { type: file.type })
      // console.log('blob', blob)
      return blob
    },
    blobToFile (blob, fileName) {
      console.log(blob)
      // new File
      const file = new File([blob], fileName, { type: blob.type })
      console.log('file', file)
    },
    async shardingSubmit () {
      const size = 10 * 1024 * 1024
      // const fileData = this.fileList[0]
      // console.log('fileData', fileData)
      // // const fileName = fileData.name.split('.')[0]
      // const blob = new Blob([fileData], { type: fileData.type })
      const blob = this.compreeContent
      console.log('blob', blob)
      const blobSize = blob.size
      let current, i
      console.log('blob', blob, blob.size)
      for (current = 0, i = 0; current < blobSize; current += size, i++) {
        const _formdata = new FormData()
        // 一次添加2M大小的切片  注意添加时的说明一般为文件名，后端接收后按照文件名标识拼接
        _formdata.append('file', blob.slice(current, current + size))
        _formdata.append('chunkIndex', i + 1)
        _formdata.append('chunkTotal', Math.ceil(blobSize / size))
        // if (i + 1 === Math.ceil(blobSize / size)) {
        //   _formdata.append('name', fileName)
        // } else {
        //   _formdata.append('name', `片段${i + 1}`)
        // }
        _formdata.append('name', `片段${Math.ceil(blobSize / size)}`)
        _formdata.append('suffix', 'zip')
        // _formdata.append('suffix', 'png')
        axios({
          url: '/api/part',
          method: 'POST',
          headers: {
            'Content-type': 'multipart/form-data'
          },
          data: _formdata
        }).then(response => {
          console.log(response)
          // 计算当前上传进度，展示到页面
          if (Math.ceil(blobSize / size) === i + 1) {
            this.precent = '100'
          } else {
            this.precent = Math.ceil(((current) / blobSize) * 100)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    async submit () {
      const _formdata = new FormData()
      // 循环fileList,每次都创建一个formdata对象上传
      this.fileList.forEach(async item => {
        // const _formdata = new FormData()
        const blob = new Blob([item], { type: item.type })
        console.log('blob', blob)
        _formdata.append('files', blob, item.name)
        // const response = await fetch('/api/upload', {
        //   method: 'POST',
        //   headers: {
        //     // 'Content-Type': 'multipart/form-data;boundary=----WebKitFormBoundaryQhzgCEcTISN1i862'
        //   },
        //   body: _formdata
        // })
        // console.log('response', response)
        // const data = response.json()
        // console.log('data', data)
        // axios({
        //   url: '/api/upload',
        //   method: 'POST',
        //   headers: {
        //     'Content-type': 'multipart/form-data'
        //   },
        //   data: _formdata
        // }).then(response => {
        //   console.log(response)
        // }).catch(err => {
        //   console.log(err)
        // })
      })
      axios({
        url: '/api/upload',
        method: 'POST',
        headers: {
          'Content-type': 'multipart/form-data'
        },
        data: _formdata
      }).then(response => {
        console.log(response)
      }).catch(err => {
        console.log(err)
      })
    }
    /*
    /part
post请求参数file，chunkIndex分片索引，chunkTotal分片总数，name文件名，suffix后缀。
    */
  }
}
</script>
